<template>
    <div class="bigbox">
        <div v-for="item in items">
            <checkBox v-if="!item.children" :options="[item]" :title="item.label" :fathers="[item.value]"></checkBox>
            <checkBox v-if="item.children" :options="item.children" :title="item.label" :fathers="[item.value]">
            </checkBox>
        </div>
    </div>
</template>

<script setup lang="ts">
import _ from 'lodash'
import { menuRoute } from '@/router/routes'
import { ref } from 'vue'
import checkBox from './checkBox.vue'
let arrMenu: any = []
const items: any = ref([])
// 路由最终结果
const resultRoute = (ro: any) => {
    arrMenu = []
    ro.forEach((route: any) => {
        const result = changeRoute(route)
        arrMenu.push(result)
    })
    items.value = arrMenu
}
// 路由数据格式整理
const changeRoute = (obj: any) => {
    if (obj.children) {
        const children: any = obj.children.map((el: any) => changeRoute(el))
        const item: any = {
            value: obj.path,
            label: obj.meta.title || '无',
            children: children,
        }
        return item
    } else {
        const item = {
            value: obj.path,
            label: obj.meta.title || '无',
        }
        return item
    }
}
resultRoute(menuRoute[0].children)
</script>

<style lang="scss" scoped>
.bigbox{
    width: 100%;
    max-height: 100%;
    overflow: auto;
    @include scroll-bar();  
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
</style>
